import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:full_display/common/qxp_color.dart';
import 'package:full_display/common/qxp_style.dart';
import 'package:full_display/page/clouds/component/pop_menus.dart';
import 'package:full_display/provide/radio_state_provider.dart';
import 'package:full_display/unit/asset_utils/asset_utils.dart';
import 'package:full_display/unit/screen/screen_util1.dart';
import 'package:full_display/unit/screen/screen_utility.dart';
import 'package:full_display/unit/widgets/radio/widget_radio.dart';
import 'package:provider/provider.dart';

class CloudsAddAplicingPage extends StatefulWidget {
  const CloudsAddAplicingPage({super.key});

  @override
  State<CloudsAddAplicingPage> createState() => _CloudsAddAplicingPageState();
}

class _CloudsAddAplicingPageState extends State<CloudsAddAplicingPage> {
  TextEditingController nameController = TextEditingController();
  String selRow = '';
  String selColume = '';
  late RadioStateProvider radioData;
  @override
  Widget build(BuildContext context) {
    radioData = context.watch<RadioStateProvider>();
    return Scaffold(
      backgroundColor: ColorPlate.background,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: ColorPlate.background,
        elevation: 0,
        title: Center(
          child: Text(
            '新建拼接',
            textAlign: TextAlign.center,
            style: StandardTextStyle.textWhite16BoldStyle,
          ),
        ),
        leading: IconButton(
          icon: Image.asset(
              height: 20.0.H, width: 20.0.W, AssetUtils.getAsset2Image("back")),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        actions: [
          TextButton(
            child: Text(
              '',
              textAlign: TextAlign.center,
              style: StandardTextStyle.textWhite14BoldStyle,
            ),
            onPressed: () {},
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0.W),
        child: Center(
          child: Column(
            children: [
              Container(
                decoration: const BoxDecoration(
                  color: ColorPlate.backgroundOpacity5,
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                ),
                height: 56.0.H,
                width: ScreenUtil1.screenWidth - 40.0.W,
                child: Container(
                  margin: EdgeInsets.only(left: 20.0.H),
                  height: 50.0.W,
                  child: TextField(
                    cursorHeight: 20,
                    style: const TextStyle(color: Colors.white),
                    controller: nameController,
                    decoration: InputDecoration(
                      hintText: "请输入拼接名称",
                      hintStyle: StandardTextStyle.textWhite16BoldOp50Style,
                      enabledBorder: const UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: ColorPlate.backgroundOpacity0),
                      ),
                      focusedBorder: const UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: ColorPlate.backgroundOpacity0),
                      ),
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 10.0.H),
                padding: EdgeInsets.only(left: 20.0.H, right: 20.0.H),
                decoration: const BoxDecoration(
                  color: ColorPlate.backgroundOpacity5,
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                ),
                height: 56.0.H,
                width: ScreenUtil1.screenWidth - 40.0.W,
                child: InkWell(
                  onTap: () {
                    PopMenus.showPop(
                        context: context,
                        listData: [
                          {'title': '1', 'img': ''},
                          {'title': '2', 'img': ''},
                          {'title': '3', 'img': ''},
                          {'title': '4', 'img': ''},
                          {'title': '5', 'img': ''}
                        ],
                        selText: "1",
                        isImg: false,
                        itemHeight: 50.0.H,
                        itemWidth: ScreenUtil1.screenWidth - 40.0.W,
                        topH: ScreenUtil1.statusBarHeight + 182.0.H,
                        leftP: 20.0.W,
                        trianglePosition:
                            (ScreenUtil1.screenWidth - 60.0.W) / 2.0,
                        clickCallback: (int index, Map value) {
                          selRow = value['title'];
                        });
                  },
                  child: Container(
                    width: ScreenUtil1.screenWidth - 40.0.W,
                    height: 56.0.H,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        selRow.isNotEmpty
                            ? Text(
                                selRow,
                                textAlign: TextAlign.center,
                                style: StandardTextStyle.textWhite16BoldStyle,
                              )
                            : Text(
                                '请选择横向数量',
                                textAlign: TextAlign.center,
                                style:
                                    StandardTextStyle.textWhite16BoldOp50Style,
                              ),
                        Image.asset(
                            height: 20.0.H,
                            width: 20.0.W,
                            AssetUtils.getAsset2Image("down")),
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 10.0.H),
                padding: EdgeInsets.only(left: 20.0.H, right: 20.0.H),
                decoration: const BoxDecoration(
                  color: ColorPlate.backgroundOpacity5,
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                ),
                height: 56.0.H,
                width: ScreenUtil1.screenWidth - 40.0.W,
                child: InkWell(
                  onTap: () {
                    PopMenus.showPop(
                        context: context,
                        listData: [
                          {'title': '1', 'img': ''},
                          {'title': '2', 'img': ''},
                          {'title': '3', 'img': ''},
                          {'title': '4', 'img': ''},
                          {'title': '5', 'img': ''}
                        ],
                        selText: "1",
                        isImg: false,
                        itemHeight: 50.0.H,
                        itemWidth: ScreenUtil1.screenWidth - 40.0.W,
                        topH: ScreenUtil1.statusBarHeight + 258.0.H,
                        leftP: 20.0.W,
                        trianglePosition:
                            (ScreenUtil1.screenWidth - 60.0.W) / 2.0,
                        clickCallback: (int index, Map value) {
                          selColume = value['title'];
                        });
                  },
                  child: Container(
                    width: ScreenUtil1.screenWidth - 40.0.W,
                    height: 56.0.H,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        selColume.isNotEmpty
                            ? Text(
                                selColume,
                                textAlign: TextAlign.center,
                                style: StandardTextStyle.textWhite16BoldStyle,
                              )
                            : Text(
                                '请输入纵向数量',
                                textAlign: TextAlign.center,
                                style:
                                    StandardTextStyle.textWhite16BoldOp50Style,
                              ),
                        Image.asset(
                            height: 20.0.H,
                            width: 20.0.W,
                            AssetUtils.getAsset2Image("down")),
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                child: RadioWidget(
                  list: radioData.splicinglist,
                  isBg: true,
                  isRow: true,
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 60.0.H),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: (ScreenUtil1.screenWidth - 66.0.W) / 2.0,
                      child: TextButton(
                        onPressed: () {},
                        style: ButtonStyle(
                            //圆角
                            shape: MaterialStateProperty.all(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(22))),
                            //边框
                            side: MaterialStateProperty.all(
                              const BorderSide(
                                  color: ColorPlate.white, width: 1.0),
                            ),
                            //背景
                            backgroundColor:
                                MaterialStateProperty.all(Colors.transparent)),
                        child: Text(
                          '取消',
                          style: StandardTextStyle.textWhite16BoldStyle,
                        ),
                      ),
                    ),
                    Container(
                      width: (ScreenUtil1.screenWidth - 66.0.W) / 2.0,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            //渐变位置
                            begin: Alignment.topCenter, //右上
                            end: Alignment.bottomCenter, //左下
                            //渐变颜色[始点颜色, 结束颜色]
                            colors: [ColorPlate.app_blue, ColorPlate.sub_blue]),
                        borderRadius: BorderRadius.all(Radius.circular(22.0)),
                      ),
                      child: TextButton(
                        onPressed: () {},
                        style: ButtonStyle(
                          //圆角
                          shape: MaterialStateProperty.all(
                              RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(22))),
                        ),
                        child: Text(
                          '确定',
                          style: StandardTextStyle.textWhite16BoldStyle,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
